{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}
{%- if section.settings.desktop_image != blank -%}
  {%- style -%}
    .banner-{{ section.id }} .adapt-to-image::before {
      padding-bottom: {{ 1 | divided_by: section.settings.desktop_image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
      width: 1px;
      margin-left: -1px;
    }
    @media screen and (max-width: 820px) {
      .banner-{{ section.id }} .adapt-to-image::before {
        padding-bottom: {{ 1 | divided_by: section.settings.mobile_image.aspect_ratio | times: 100 }}%;
      }
      {% if section.settings.image_height_mobile == 'custom_height_mobile' %}
        {{ section_identifier }} .container-topic, {{ section_identifier }} .container-topic .absolute-center.container, {{ section_identifier }} .container-topic .absolute-center.container .img-wrapper.custom-height-mobile {
        height: {{ section.settings.custom_mobile_height }}px !important;
      }
      {{ section_identifier }} .container-topic, {{ section_identifier }} .container-topic .absolute-center.container, {{ section_identifier }} .container-topic .absolute-center.container .img-wrapper.custom-height-mobile {
        min-height: {{ section.settings.custom_mobile_height }}px !important;
      }
      .banner-{{ section.id }} .object-fit-cover {
        height: 100% !important;
      }
      {% endif %}
    }
    {% comment %}桌面端为模块高度设置一个最小值，为图片高度的 2/3 {% endcomment %}
    @media screen and (min-width: 768px) {
      .banner-{{ section.id }} .adapt-to-image {
        min-height: {{ 1920 | divided_by: section.settings.desktop_image.aspect_ratio | times: 2 | divided_by: 3 }}px;
      }
    }
    .banner-{{ section.id }} .adapt-to-image.responsive-height {
      --image-height: {{ 1920 | divided_by: section.settings.desktop_image.aspect_ratio }}px;
    }
  {%- endstyle -%}
{%- endif -%}


{% if section.settings.enable_container %}
  {%- style -%}
  {{ section_identifier }} {
    padding-top: {{ padding_top }};
    padding-bottom: {{ padding_bottom }};
  }
   {{ section_identifier }} .container-layout {
        padding: 32px 56px;
    }

    {{ section_identifier }} .btn-container {
        margin-top: 40px;
    }
     {{ section_identifier }} .kiks-btn-secondary:hover {
        opacity: 0.8;
    }
     {{ section_identifier }} .kiks-heading {
        font-size: 40px;
        font-weight: 700;
        padding-bottom: 16px;
    }
    {{ section_identifier }} .inner-content {
      height: 100%;
  }


 @media only screen and (max-width: 1024px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
    {{ section_identifier }} .kiks-heading {
        font-size: 32px;
    }
      {{ section_identifier }} .container-layout {
        padding: 32px 16px;
    }
    {{ section_identifier }} .kiks-btn-secondary{
      margin-top: 0;
    }

    {{ section_identifier }} .btn-container {
        margin-top: 32px;
    }
  }
 @media only screen and (max-width: 820px) {
{{ section_identifier }} .kiks-btn-secondary{
      margin-top: 20px;
    }
 }
 @media only screen and (max-width: 430px) {
  {{ section_identifier }} .btn-inner-container > a.btn {
      width: fit-content;
  }
  {{ section_identifier }} .btn-inner-container {
    display: flex;
    flex-direction: column;
  }
 }
 {% if section.settings.image_height_mobile == 'custom_height_mobile' %}
    @media screen and (max-width: 820px) {
        
        {{ section_identifier }} .container-topic, {{ section_identifier }} .container-topic .absolute-center.container, {{ section_identifier }} .container-topic .absolute-center.container .img-wrapper.custom-height-mobile {
        height: {{ section.settings.custom_mobile_height }}px !important;
      }
      {{ section_identifier }} .container-topic, {{ section_identifier }} .container-topic .absolute-center.container, {{ section_identifier }} .container-topic .absolute-center.container .img-wrapper.custom-height-mobile {
        min-height: {{ section.settings.custom_mobile_height }}px !important;
      }
      .banner-{{ section.id }} .object-fit-cover {
        height: 100% !important;
      }

      .inner-content.custom_height_mobile .container.pt-section.pb-section {
          padding: 0 16px !important;
      }
      {{ section_identifier }} .container-layout {
        padding: 0 16px 46px;
      }
    }
  {% endif %}
  {%- endstyle -%}
{% endif %}
{% render 'text-shadow', id: section.id, ammount: section.settings.text_shadow_ammount %}

{% render 'image-overlay-opacity', id: section.id, ammount: section.settings.image_overlay_opacity %}

{% assign mobile_image_display_height = 375 | divided_by: section.settings.mobile_image.aspect_ratio %}

{%- comment -%}当布局为居中时，不以栅格来限制文本区的宽度，否则限制为 6 个栅格{%- endcomment -%}
{%- liquid
  case section.settings.desktop_text_position
    when 'top_left'
      assign desktop_text_position = 'align-items-md-start justify-content-md-start'
    when 'top_center'
      assign desktop_text_position = 'align-items-md-start justify-content-md-center'
    when 'top_right'
      assign desktop_text_position = 'align-items-md-start justify-content-md-end'
    when 'middle_left'
      assign desktop_text_position = 'align-items-md-center justify-content-md-start'
    when 'middle_center'
      assign desktop_text_position = 'align-items-md-center justify-content-md-center'
    when 'middle_right'
      assign desktop_text_position = 'align-items-md-center justify-content-md-end'
    when 'bottom_left'
      assign desktop_text_position = 'align-items-md-end justify-content-md-start'
    when 'bottom_center'
      assign desktop_text_position = 'align-items-md-end justify-content-md-center'
    when 'bottom_right'
      assign desktop_text_position = 'align-items-md-end justify-content-md-end'
    else
      assign desktop_text_position = ''
  endcase
%}

{%- liquid
  case section.settings.mobile_text_position
    when 'top'
      assign mobile_text_position = 'align-items-start'
    when 'center'
      assign mobile_text_position = 'align-items-center'
    when 'bottom'
      assign mobile_text_position = 'align-items-end'
    else
      assign mobile_text_position = ''
  endcase
%}

{%- liquid
  case section.settings.desktop_text_alignment
    when 'left'
      assign text_alignment = 'text-md-start'
    when 'center'
      assign text_alignment = 'text-md-center'
    when 'right'
      assign text_alignment = 'text-md-end'
    else
      assign text_alignment = ''
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign text_alignment = text_alignment | append: ' text-start'
    when 'center'
      assign text_alignment = text_alignment | append: ' text-center'
    when 'right'
      assign text_alignment = text_alignment | append: ' text-end'
    else
      assign text_alignment = text_alignment | append: ''
  endcase
%}

{%- liquid
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase
%}

{%- liquid
  case section.settings.image_height
    when 'fits_viewport'
      assign image_height = 'h-fits-viewport'
    when 'adapt_to_image'
      assign image_height = 'adapt-to-image'
    when 'dybamic_height'
      assign image_height = 'dybamic_height'
  endcase

  if section.settings.image_height == 'adapt_to_image' and section.settings.fixed_height
    assign image_height = 'adapt-to-image responsive-height'
  endif
%}

{%- liquid
  assign show_stretched_link = false
  for block in section.blocks
    case block.type
      when 'button'
        if block.settings.button_link_1 != blank
          assign stretched_link = block.settings.button_link_1
          assign show_stretched_link = true
        elsif block.settings.button_link_2 != blank
          assign stretched_link = block.settings.button_link_2
          assign show_stretched_link = true
        else
          assign show_stretched_link = false
        endif

        case block.settings.button_set_style
          when 'solid_with_outline'
            assign first_button_class = 'mx-2 btn-'
            assign parent_class = 'mx-n2'
          when 'solid_with_solid'
            assign first_button_class = 'mx-2 btn-'
            assign second_button_class = 'mx-2 btn-' 
            assign parent_class = 'mx-n1'           
          when 'solid_with_text_link'
            assign first_button_class = 'mx-3 btn-'
            assign parent_class = 'mx-n3'
          when 'outline'
            assign first_button_class = 'mx-2 btn-outline-'
            assign parent_class = 'mx-n2'

          when 'outline_with_text_link'
            assign first_button_class = 'mx-3 btn-outline-'
            assign parent_class = 'mx-n3'
          when 'text_link'
            assign first_button_class = 'mx-3 btn-link link-'
            assign parent_class = 'mx-n3'
        endcase

          case block.settings.button_set_second
          when 'solid_with_outline'
            assign second_button_class = 'mx-2 btn-outline-'
            assign parent_class = 'mx-n2'
          when 'solid_with_solid'
            assign second_button_class = 'mx-2 btn-' 
            assign parent_class = 'mx-n1'           
          when 'solid_with_text_link'
            assign second_button_class = 'mx-3 btn-link link-'
            assign parent_class = 'mx-n3'
          when 'outline'
            assign second_button_class = 'mx-2 btn-outline-'
            assign parent_class = 'mx-n2'

          when 'outline_with_text_link'
            assign second_button_class = 'mx-3 btn-link link-'
            assign parent_class = 'mx-n3'
          when 'text_link'
            assign second_button_class = 'mx-3 btn-link link-'
            assign parent_class = 'mx-n3'
        endcase
    endcase
  endfor
%}

{%- liquid
  case section.settings.fontsize
    when 'display-4'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'display-5'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'h1'
      assign bodysize = 'lead'
      assign mark = 'h3'
    when 'h2'
      assign bodysize = ''
      assign mark = 'h4'
    when 'h3'
      assign bodysize = ''
      assign mark = 'h5'
  endcase
-%}

<div class="banner-{{ section.id }} {{ section.settings.section_margin_top }} {{ section.settings.section_margin_bottom }}">
  <input type="hidden" value="{{ section.settings.enable_transparent_header }}" class="as-header-enable-transparent">
  <div class="container-topic px-0 position-relative wrapper">
    <div class="absolute-center {% if section.settings.enable_container %}container {% else %}bg-gray-300{% endif %}">
      <div class="img-wrapper h-100 rigid-wrapper{% if section.settings.enable_container %} rounded-8{% endif %} {% if section.settings.image_height_mobile == 'adapt_to_image_mobile' %} adapt-to-image {% endif %} {% if section.settings.image_height_mobile == 'custom_height_mobile' %} custom-height-mobile {% endif %}">
        <picture>
          {% if section.settings.mobile_image != blank %}
            <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px"
              srcset="{{ section.settings.mobile_image | img_url: '375x' }} 1x,
              {{ section.settings.mobile_image | img_url: '375x', scale: 2 }} 2x,
              {{ section.settings.mobile_image | img_url: '375x', scale: 3 }} 3x">
          {% endif %}
          {% if section.settings.desktop_image != blank %}
            <img class="object-fit-cover"
              srcset="{%- if section.settings.desktop_image.width >= 1200 -%}{{ section.settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 1920 -%}{{ section.settings.desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 2400 -%}{{ section.settings.desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 3840 -%}{{ section.settings.desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
              src="{{ section.settings.desktop_image | img_url: '750x' }}"
              loading="lazy"
              alt="{{ section.settings.desktop_image.alt | escape }}" >
          {% elsif section.settings.mobile_image != blank %}
              <img class="object-fit-cover"
              srcset="{%- if section.settings.mobile_image.width >= 414 -%}{{ section.settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 600 -%}{{ section.settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 828 -%}{{ section.settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 1000 -%}{{ section.settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 1200 -%}{{ section.settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 2400 -%}{{ section.settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 3840 -%}{{ section.settings.mobile_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                src="{{ section.settings.mobile_image | img_url: '750x' }}"
                loading="lazy"
                alt="{{ section.settings.mobile_image.alt | escape }}" >
          {% endif %}
          {% if section.settings.desktop_image == blank and section.settings.mobile_image == blank %}
            <div class="object-fit-cover img-placeholder h-100">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
            </div>
          {% endif %}
        </picture>
      </div>
      {% if section.settings.enable_image_link %}
        {% if show_stretched_link %}
          <a {% if stretched_link contains 'https://' %} target="_blank" rel="nofollow" {% endif %}  href="{{ stretched_link }}" class="stretched-link"></a>
        {% endif %}
      {% endif %}
    </div>
    <div class="bg-black absolute-center hero-image-overlay-opacity-{{ section.id }}"></div>
    <div class="inner-content {{ image_height }} {{ section.settings.image_height_mobile }} position-relative d-flex" {% if section.settings.image_height == 'adapt_to_image' %}style="min-height: {{ mobile_image_display_height }}px;"{%  elsif section.settings.image_height == 'dynamic_height' %} style="min-height: 100%;"{% endif %}>
      <div class="container {{ section.settings.section_padding_top }} {{ section.settings.section_padding_bottom }}">
        <div class="h-100 row {{ mobile_text_position }} justify-content-center {{ desktop_text_position }}">
          <div class="col {{ section.settings.text_width }}">
            <div class="{% if section.settings.is_anim %} as-anim anim {% endif %} {{ text_alignment }} {{ text_color }}">
              {% if section.settings.enable_image_link %}
                {% if show_stretched_link %}
                  <a {% if stretched_link contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ stretched_link }}" class="stretched-link"></a>
                {% endif %}
              {% endif %}
              <div class="{% if section.settings.enable_container %}container-layout {% endif %}hero-text-shadow-overlay-{{ section.id }} text-content">
              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'overline' -%}
                    {%- if block.settings.overline != blank -%}
                      <p class="mb-0 {% unless forloop.first %}mt-2{% endunless %}">{{ block.settings.overline }}</p>
                    {%- endif -%}
                  {%- when 'heading' -%}
                    {%- if block.settings.heading != empty -%}
                      {% if block.settings.enable_adjust_h_tag %}
                        {% assign mark = block.settings.adjust_h_tag_to %}
                      {% endif %}
                      <{{ mark }} class="kiks-heading {{ section.settings.fontsize }} fw-bold mb-0">{{ block.settings.heading }}</{{ mark }}>
                    {%- endif -%}
                  {%- when 'text' -%}
                    {%- if block.settings.text != blank -%}
                      <div class="{{ bodysize }} fw-normal no-last-margin richtext-with-link {{ richtext_link_style }}">
                        {{ block.settings.text }}
                      </div>
                    {%- endif -%}
                  {%- when 'button' -%}
                    {% if block.settings.button_label_1 != blank or block.settings.button_label_2 != blank %}
                      <div class="btn-container">
                        <div class="btn-inner-container">
                          {%- if block.settings.button_label_1 != blank -%}
                            {%- if block.settings.button_link_1 != blank -%}
                              <a {% render 'link', link: block.settings.button_link_1 %} href="{{ block.settings.button_link_1 }}" class="kiks-btn-primary btn {{ first_button_class }}{{ btn_style }} with-stretched-link" {% if block.settings.enable_solid_button %} style="background: {{ block.settings.background_color }};"{% endif %}>
                                {{ block.settings.button_label_1 }}
                              </a>
                            {%- else -%}
                              <div class="kiks-btn-primary btn {{ first_button_class }}{{ btn_style }} with-stretched-link disabled cursor-default" {% if block.settings.enable_solid_button %} style="background: {{ block.settings.background_color }};"{% endif %}>
                                {{ block.settings.button_label_1 }}
                              </div>
                            {%- endif -%}
                          {%- endif -%}
                        {%- if block.settings.button_label_2 != blank -%}
                            {%- if block.settings.button_link_2 != blank -%}
                              <a {% render 'link', link: block.settings.button_link_2 %} href="{{ block.settings.button_link_2 }}" class="kiks-btn-secondary btn {{ second_button_class }}{{ btn_style }} with-stretched-link" {% if block.settings.enable_border_button %} style="border-color: {{ block.settings.border_color }}; color: {{ block.settings.border_color }};"{% endif %}>
                                {{ block.settings.button_label_2 }}
                              </a>
                              {%- else -%}
                              <div class="kiks-btn-secondary btn {{ second_button_class }}{{ btn_style }} with-stretched-link disabled cursor-default" {% if block.settings.enable_border_button %} style="border-color: {{ block.settings.border_color }}; color: {{ block.settings.border_color }};"{% endif %}>
                                {{ block.settings.button_label_2 }}
                              </div>
                            {%- endif -%}
                          {%- endif -%} 
                        </div>
                      </div>
                    {% endif %}
                {%- endcase -%}
              {%- endfor -%}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Image banner",
    "class": "kiks image-with-text-overlay text-over-image as-section-text-over-image",
    "tag": "section",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_transparent_header",
        "label": "Enable transparent header",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_container",
        "label": "Enable container",
        "default": false
      },
      {
        "type": "header",
        "content": "Image"
      },
      {
        "label": "Desktop Image",
        "type": "image_picker",
        "id": "desktop_image"
      },
      {
        "label": "Mobile Image",
        "type": "image_picker",
        "id": "mobile_image"
      },
      {
        "type": "select",
        "id": "image_height",
        "label": "Image height",
        "options": [
          {
            "value": "adapt_to_image",
            "label": "Adapt to image"
          },
          {
            "value": "fits_viewport",
            "label": "Fits Viewport"
          },
          {
            "value": "dybamic_height",
            "label": "Dynamic height"
          }
        ],
        "default": "adapt_to_image"
      },
      {
        "type": "select",
        "id": "image_height_mobile",
        "label": "Image height (Mobile)",
        "options": [
          {
            "value": "adapt_to_image_mobile",
            "label": "Adapt to image"
          },
          {
            "value": "fits_viewport_mobile",
            "label": "Fits Viewport"
          },
          {
            "value": "dybamic_height_mobile",
            "label": "Dynamic height"
          },
          {
            "value": "custom_height_mobile",
            "label": "Custom height"
          }
        ],
        "default": "adapt_to_image_mobile"
      },
      {
        "type": "range",
        "id": "custom_mobile_height",
        "min": 664,
        "max": 764,
        "step": 1,
        "default": 714,
        "unit": "px",
        "label": "Custom mobile height"
      },
      {
        "type": "checkbox",
        "id": "is_anim",
        "label": "Whether the text needs to be animated",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "fixed_height",
        "label": "Image will be fixed height when choose \"Adapt to image\".",
        "default": false
      },
      {
        "type": "range",
        "id": "image_overlay_opacity",
        "min": 0,
        "max": 100,
        "step": 20,
        "default": 0,
        "unit": "%",
        "label": "Image overlay opacity"
      },
      {
        "type": "header",
        "content": "Text"
      },
      {
        "type": "select",
        "id": "desktop_text_position",
        "label": "Desktop text position",
        "options": [
          {
            "value": "top_left",
            "label": "Top left"
          },
          {
            "value": "top_center",
            "label": "Top center"
          },
          {
            "value": "top_right",
            "label": "Top right"
          },
          {
            "value": "middle_left",
            "label": "Middle left"
          },
          {
            "value": "middle_center",
            "label": "Middle center"
          },
          {
            "value": "middle_right",
            "label": "Middle right"
          },
          {
            "value": "bottom_left",
            "label": "Bottom left"
          },
          {
            "value": "bottom_center",
            "label": "Bottom center"
          },
          {
            "value": "bottom_right",
            "label": "Bottom right"
          }
        ],
        "default":   "middle_left"
      },
      {
        "type": "select",
        "id": "mobile_text_position",
        "label": "Mobile text position",
        "options": [
          {
            "value": "top",
            "label": "Top"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "bottom",
            "label": "Bottom"
          }
        ],
        "default": "top"
      },
      {
        "type": "select",
        "id": "text_width",
        "label": "Desktop text width",
        "options": [
          {
            "value": "col-md-8",
            "label": "2/3"
          },
          {
            "value": "col-md-6",
            "label": "1/2"
          },
          {
            "value": "col-md-4",
            "label": "1/3"
          }
        ],
        "default": "col-md-6"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "desktop_text_alignment",
        "label": "Desktop text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "left"
      },
      {
        "type": "select",
        "id": "mobile_text_alignment",
        "label": "Mobile text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "left"
      },
      {
        "type": "range",
        "id": "text_shadow_ammount",
        "min": 0,
        "max": 100,
        "step": 20,
        "default": 0,
        "unit": "%",
        "label": "Text shadow ammount"
      },
      {
        "type": "header",
        "content": "Advanced settings"
      },
      {
        "type": "select",
        "id": "section_margin_top",
        "label": "Section top space",
        "options": [
          {
            "value": "",
            "label": "None"
          },
          {
            "value": "mt-3",
            "label": "Small"
          },
          {
            "value": "mt-section",
            "label": "Large"
          }
        ],
        "default": ""
      },
      {
        "type": "select",
        "id": "section_margin_bottom",
        "label": "Section bottom space",
        "options": [
          {
            "value": "",
            "label": "None"
          },
          {
            "value": "mb-3",
            "label": "Small"
          },
          {
            "value": "mb-section",
            "label": "Large"
          }
        ],
        "default": ""
      },
      {
        "type": "select",
        "id": "section_padding_top",
        "label": "Section inner top space",
        "options": [
          {
            "value": "",
            "label": "None"
          },
          {
            "value": "pt-3",
            "label": "Small"
          },
          {
            "value": "pt-section",
            "label": "Large"
          }
        ],
        "default": "pt-section"
      },
      {
        "type": "select",
        "id": "section_padding_bottom",
        "label": "Section innner bottom space",
        "options": [
          {
            "value": "",
            "label": "None"
          },
          {
            "value": "pb-3",
            "label": "Small"
          },
          {
            "value": "pb-section",
            "label": "Large"
          }
        ],
        "default": "pb-section"
      },
      {
        "type": "select",
        "id": "fontsize",
        "label": "Fontsize",
        "options": [
          {
            "value": "display-4",
            "label": "Extra large"
          },
          {
            "value": "display-5",
            "label": "Large"
          },
          {
            "value": "h1",
            "label": "Medium"
          },
          {
            "value": "h2",
            "label": "Small"
          },
          {
            "value": "h3",
            "label": "Extra small"
          }
        ],
        "default": "h1"
      },
      {
        "type": "checkbox",
        "id": "enable_image_link",
        "label": "Enable image link",
        "default": true
      },
      {
        "type": "header",
        "content": "Kikstart Spacing Settings",
        "info": "Need to be enabled the container layout."
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_top_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding top",
        "default": 48
      },
      {
        "type": "range",
        "id": "padding_bottom_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding Bottom",
        "default": 48
      }
    ],
    "blocks": [
      {
        "type": "overline",
        "name": "Overline",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "overline",
            "default": "Overline",
            "label": "Overline"
          }
        ]
      },
      {
        "type": "heading",
        "name": "Heading",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "Image with text overlay",
            "label": "Heading"
          },
          {
            "type": "checkbox",
            "id": "enable_adjust_h_tag",
            "label": "Enable adjust H tag",
            "default": false
          },
          {
            "type": "select",
            "id": "adjust_h_tag_to",
            "label": "Adjust the H tag to",
            "options": [
              {
                "value": "h1",
                "label": "H1"
              },
              {
                "value": "h2",
                "label": "H2"
              },
              {
                "value": "h3",
                "label": "H3"
              },
              {
                "value": "h4",
                "label": "H4"
              },
              {
                "value": "h5",
                "label": "H5"
              },
              {
                "value": "h6",
                "label": "H6"
              }
            ],
            "default":   "h3"
          }
        ]
      },
      {
        "type": "text",
        "name": "Description",
        "limit": 1,
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Give customers details about the banner image(s) or content on the template.</p>",
            "label": "Description"
          }
        ]
      },
      {
        "type": "button",
        "name": "Buttons",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label_1",
            "default": "Button label",
            "label": "First button label"
          },
          {
            "type": "url",
            "id": "button_link_1",
            "label": "First button link"
          },
          {
            "type": "checkbox",
            "id": "enable_solid_button",
            "label": "Enable solid color",
            "default": false
          },
          {
            "type": "color",
            "id": "background_color",
            "label": "Button background color",
            "default": "#007AFF"
          },
          {
            "type": "select",
            "id": "button_set_style",
            "label": "Button set style",
            "options": [
              {
                "value": "solid_with_outline",
                "label": "Solid button with Outlined button"
              },
              { 
                "value": "solid_with_solid",
                "label": "Solid button with Solid button"
              },
              {
                "value": "solid_with_text_link",
                "label": "Solid button with Text link"
              },
              {
                "value": "outline",
                "label": "Outlined button"
              },
              {
                "value": "outline_with_text_link",
                "label": "Outlined button with Text link"
              }, {
                "value": "text_link",
                "label": "Text link"
              }
            ],
            "default": "solid_with_outline"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "default": "Button label",
            "label": "Second button label"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Second button link"
          },
          {
            "type": "checkbox",
            "id": "enable_border_button",
            "label": "Enable border color",
            "default": false
          },
          {
            "type": "color",
            "id": "border_color",
            "label": "Button border color",
            "default": "#007AFF"
          },
          {
            "type": "select",
            "id": "button_set_second",
            "label": "Button set style second",
            "options": [
              {
                "value": "solid_with_outline",
                "label": "Solid button with Outlined button"
              },
              { 
                "value": "solid_with_solid",
                "label": "Solid button with Solid button"
              },
              {
                "value": "solid_with_text_link",
                "label": "Solid button with Text link"
              },
              {
                "value": "outline",
                "label": "Outlined button"
              },
              {
                "value": "outline_with_text_link",
                "label": "Outlined button with Text link"
              }, {
                "value": "text_link",
                "label": "Text link"
              }
            ],
            "default": "solid_with_outline"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Image banner",
        "blocks": [
          {
            "type": "overline"
          },
          {
            "type": "heading"
          },
          {
            "type": "text"
          },
          {
            "type": "button"
          }
        ]
      }
    ]
  }
{% endschema %}
